<template>
  <el-upload class="upload-demo pic_img" action="/api/common/upload/index/" :multiple="false" :on-success="imgSuccess" :on-remove="imgRemove" :data="{
            folder:'banner'
        }" :auto-upload="true" list-type="none" :before-upload="beforeupload" :accept="accept" :file-list="fileList">
    <span v-if="isText">重新选择</span>
    <div v-else>
      <div>
        <img src="../../assets/img/meb/upload.png" alt />
        <div class="upload_text">点击上传图片</div>
      </div>
    </div>
  </el-upload>
</template>
<script>
export default {
  name: "myupload",
  props: {
    url: null,
    index: null, //接收到的自定义的参数
    onSuccess: Function,
    onRemove: Function,
    onload: Function,
    fileList: null,
    accept: {
      type: String,
      default: ".jpg,.png,.jpeg,.jpeg2000,gif"
    },
    isText: {
      type: Boolean,
      default: true
    },
    maxWidth: {
      type: Number,
      default: 640
    }
  },
  data () {
    return {
      imgQuality: 0.1862 //图片质量
    };
  },
  methods: {
    dataURItoBlob (dataURI, type) {
      var binary = atob(dataURI.split(",")[1]);
      var array = [];
      for (var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
      }
      return new Blob([new Uint8Array(array)], { type: type });
    },
    beforeupload (param) {
      this.onload(this.index);
      var that = this;
      const imgSize = param.size / 1024 / 1024;
      console.log(imgSize)
      //   if (imgSize > 1) {
      const _this = this;
      return new Promise(resolve => {
        const reader = new FileReader();
        const image = new Image();
        image.onload = imageEvent => {
          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");

          // 图片原始尺寸
          var originWidth = image.width;
          var originHeight = image.height;
          // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
          var maxWidth = image.width;

          var maxHeight = image.height;
          // 目标尺寸
          var targetWidth = originWidth,
            targetHeight = originHeight;
          // 图片尺寸超过最大尺寸的限制
          if (originWidth > maxWidth || originHeight > maxHeight) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
              // 更改宽度，按照宽度限定尺寸
              targetWidth = maxWidth;
              targetHeight = Math.round(
                maxWidth * (originHeight / originWidth)
              );
            } else {
              targetHeight = maxHeight;
              targetWidth = Math.round(
                maxHeight * (originWidth / originHeight)
              );
            }
          }
          //对图片进行缩放
          canvas.width = targetWidth;
          canvas.height = targetHeight;

          context.clearRect(0, 0, targetWidth, targetHeight);
          // 图片压缩
          context.drawImage(image, 0, 0, targetWidth, targetHeight);

          const dataUrl = canvas.toDataURL(param.type, 0.92);
          const blobData = _this.dataURItoBlob(dataUrl, param.type);
          resolve(blobData);
        };
        reader.onload = e => {
          image.src = e.target.result;
        };
        reader.readAsDataURL(param);
      });
      //   }
    },
    imgRemove () {
      this.onRemove(...arguments, this.index);
    },
    imgSuccess () {
      this.onSuccess(...arguments, this.index);
    }
  }
};
</script>
